
HTML:
1
<div id="left_list">
2
  <p class="project_number"><a href="#">007</a></p>
3
  <p class="project_number"><a href="#">012</a></p>
4
  ...
5
  <p class="project_number"><a href="#">186</a></p>
6
</div>


javascript:
показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки
01
$(document).ready(function(){
02
    // При наведении на левый блок
03
    var winHeight = $(window).height();
04
    var margin = $('#left_list').height() - winHeight;
05

06
    // движение при попадании курсора в области
07
    $('#left_list').unbind('mouseover').mouseover(function(e){
08
        // top 1/3
09
        if (e.pageY < (winHeight / 3))
10
        {
11
            var speed = (winHeight / 6) / e.pageY;
12
            if (speed > 2) speed = 2;
13
            $('#direction').val('top');
14
        }
15
        // bottom 1/3
16
        if (e.pageY > 2 * (winHeight / 3))
17
        {
18
            var speed =  (e.pageY - ((2 / 3) * winHeight)) / (winHeight / 6) + 0.5;
19
            if (speed > 2) speed = 2;
20
            $('#direction').val('bottom');
21
        }
22
        $('#speed').val(speed);
23

24
        var direction = $('#direction').val();
25
        var speed = $('#speed').val();
26

27
        //setInterval(function(){
28
        // bottom 1/3, list moves top
29
        if (direction == 'bottom')
30
        {
31
            if (parseInt($('#left_list').css('margin-top')) > (-1) * margin)
32
            {
33
                $('#left_list').animate({marginTop: '-=50px'}, (300 / speed));
34
                $('#int').val(parseInt($('#left_list').css('margin-top')));
35
            }
36
            else
37
            {
38
                $('#left_list').animate({marginTop: '-' + margin + 'px'}, (300 / speed));
39
                $('#int').val(parseInt($('#left_list').css('margin-top')));
40
            }
41
        }
42
        // top 1/3, list moves bottom
43
        if (direction == 'top')
44
        {
45
            if ((parseInt($('#left_list').css('margin-top'))) < 0)
46
            {
47
                $('#left_list').animate({marginTop: '+=50px'}, (300 / speed));
48
                $('#int').val(parseInt($('#left_list').css('margin-top')));
49
            }
50
            else
51
            {
52
                $('#left_list').animate({marginTop: '0px'}, (300 / speed));
53
                $('#int').val(parseInt($('#left_list').css('margin-top')));
54
            }
55
        }
56

57
        // стопим, если увели мышь в середину
58
        if (direction == 'none')
59
        {
60
            $('#left_list').stop();
61
            //clearInterval();
62
        }
63
    });
64

65
    // остановка при выведении указателя за пределы
66
    $('#left_list').unbind('mouseout').mouseout(function(){
67
        $('#speed').val('0');
68
        $('#direction').val('none');
69
        $('#left_list').stop();
70
    });
71

72
    // увеличение номера при наведении
73
    $('#left_list > p.project_number').hover(
74
        function() {
75
            $(this).animate({fontSize: '10pt'}, 150);
76
        },
77
        function(){
78
            $(this).animate({fontSize: '8pt'}, 150);
79
        }
80
    );
81
});
